﻿<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="basicColumn">
            <ng-template #basicColumn>
                柱状图
                <small class="text-sm font-weight-normal">基础柱状图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-tooltip></v-tooltip>
                <v-axis></v-axis>
                <x-column url="/api/column"></x-column>
            </v-chart>
        </nz-card>
    </div>
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="groupColumn">
            <ng-template #groupColumn>
                柱状图
                <small class="text-sm font-weight-normal">分组柱状图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-tooltip></v-tooltip>
                <v-axis></v-axis>
                <v-legend></v-legend>
                <x-column url="/api/column/group"></x-column>
            </v-chart>
        </nz-card>
    </div>
</div>
<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="stackColumn">
            <ng-template #stackColumn>
                柱状图
                <small class="text-sm font-weight-normal">堆叠柱状图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-tooltip></v-tooltip>
                <v-axis></v-axis>
                <x-column url="/api/column/group" isStack="false"></x-column>
            </v-chart>
        </nz-card>
    </div>
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="complexColumn">
            <ng-template #complexColumn>
                复合柱状图
                <small class="text-sm font-weight-normal">分组折线柱状图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-tooltip></v-tooltip>
                <v-axis></v-axis>
                <v-legend></v-legend>
                <x-line url="/api/line/multi"></x-line>
                <x-column url="/api/column/group"></x-column>
            </v-chart>
        </nz-card>
    </div>
</div>